<template>
  <NavMenu />
  <div class="about-us">

    <!-- 新增噪声数据研究部分 -->
    <div class="research-section">
      <h2>噪声数据环境下模型性能的对比研究</h2>

      <!-- 引言卡片 -->
      <div class="card card-odd" v-animate-on-scroll>
        <h3>引言</h3>
        <p>在噪声数据环境下，所有模型在引入噪声后均出现性能下降，且噪声水平越高影响越显著。例如贝叶斯模型和决策树模型在40%噪声率时准确率分别降至0.6674和0.6613，这是因为噪声数据会干扰模型对关键特征的选择，导致决策逻辑偏离真实模式。</p>
      </div>

      <!-- 噪声处理技术卡片 -->
      <div class="card card-even" v-animate-on-scroll>
        <h3>噪声处理技术</h3>
        <p>针对这一问题，研究通过在LNN模型中引入焦点损失、标签平滑损失和NCE损失三种噪声处理技术，实现了1%-2%的性能提升。其中焦点损失在不同噪声水平下均表现出稳定的优化效果，在10%噪声率时F1分数达到0.9599。特别值得注意的是，标签平滑和NCE损失在中高噪声场景下展现出更强的适应性，这表明不同噪声处理策略在特定噪声强度区间存在优化偏好。</p>
      </div>

      <!-- 半监督学习方法卡片 -->
      <div class="card card-odd" v-animate-on-scroll>
        <h3>半监督学习方法</h3>
        <img src="../../assets/banjiandu.png" alt="实验结果图" class="experiment-image">
        <p>在半监督学习领域，传统方法通过生成伪标签进行无监督训练，在10%、25%、40%噪声率下分别实现了1.5%、1.8%、2.0%的性能提升。而基于最优传输理论的OTPhish方法进一步优化了伪标签的利用效率，在传统方法基础上分别额外提升1.0%、0.5%、0.5%。10%噪声率时F1分数达0.9818（传统方法0.9618），25%噪声率时F1达0.9839（传统方法0.9639），40%噪声率时F1达0.8112（传统方法0.7912）。这种优势源于OTPhish通过最优传输理论构建的一致性损失机制，能够更精确地挖掘未标记数据的潜在分布信息，从而增强模型在噪声环境下的泛化能力。</p>
      </div>

      <!-- OTPhish的优势卡片 -->
      <div class="card card-even" v-animate-on-scroll>
        <h3>OTPhish的优势</h3>
        <ul>
          <li><strong>理论框架优势</strong>：基于最优传输理论，能够有效捕捉数据间的潜在结构关系。</li>
          <li><strong>噪声标签处理</strong>：创新性地将半监督学习与噪声标签处理整合于统一框架中。</li>
          <li><strong>伪标签质量提升</strong>：通过最优传输算法优化了未标记数据的标签预测过程。</li>
          <li><strong>快速适应新威胁</strong>：通过持续利用新增的未标记数据进行增量学习。</li>
          <li><strong>用户交互友好</strong>：配备了直观的交互式界面，用户只需输入URL即可实时获取检测结果。</li>
        </ul>
      </div>

      <!-- 实验结果卡片 -->
      <div class="card card-odd" v-animate-on-scroll>
        <h3>实验结果</h3>
        <img src="../../assets/result.png" alt="实验结果图" class="experiment-image">
        <p>在25%噪声率的测试中，OTPhish的F1分数达到0.9839，较传统方法提升2%，展示出在复杂噪声环境下的卓越表现。这种优势源于其理论框架对数据分布的精准建模、半监督机制的高效利用，以及噪声处理策略的协同优化。</p>
        <!-- 插入图片 -->
        
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import gsap from 'gsap';
import NavMenu from '../component/NavMenu.vue'; // 确保路径正确

// 自定义指令：滚动动画
const vAnimateOnScroll = {
  mounted(el: HTMLElement) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 使用 gsap 实现动画
            gsap.fromTo(el,
              { opacity: 0, y: 50 },
              { opacity: 1, y: 0, duration: 1, ease: 'ease-out' }
            );
            observer.unobserve(el); // 动画触发后停止观察
          }
        });
      },
      { threshold: 0.1 } // 当元素进入视口10%时触发
    );
    observer.observe(el);
  },
};
</script>

<style scoped>
.about-us {
  max-width: 1200px; /* 限制页面宽度 */
  margin: 0 auto;
  padding: 20px; /* 增加内边距 */
  font-family: Arial, sans-serif;
  /* background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 背景渐变 */ 
}

h1 {
  text-align: center;
  color: #ff6f61; /* 鲜艳的红色 */
  padding: 20px 0; /* 标题上下留白 */
  font-size: 2.5rem; /* 调大字体 */
}

p {
  font-size: 1.2rem; /* 调大字体 */
  line-height: 1.8;
  padding: 0 20px; /* 段落左右留白 */
  color: #4a4a4a; /* 深灰色 */
}

.research-section {
  margin-top: 20px;
}

.research-section h2 {
  text-align: center;
  color: #4a82d2; /* 鲜艳的红色 */
  padding: 20px 0; /* 子标题上下留白 */
  font-size: 2rem; /* 调大字体 */
}

/* 卡片样式 */
.card {
  width: 80%; /* 卡片宽度 */
  max-width: 800px; /* 最大宽度 */
  margin: 20px auto; /* 居中显示 */
  padding: 30px 20px; /* 增加内边距 */
  opacity: 0; /* 初始状态不可见 */
  transform: translateY(20px); /* 初始状态向下偏移 */
  backdrop-filter: blur(10px); /* 高斯模糊效果 */
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 奇数卡片背景色 */
.card-odd {
  background-color: rgba(249, 249, 249, 0.8); /* 浅灰色半透明 */
}

/* 偶数卡片背景色 */
.card-even {
  background-color: rgba(255, 255, 255, 0.8); /* 白色半透明 */
}

.card h3 {
  color: #3ec3da; /* 鲜艳的红色 */
  margin-bottom: 15px;
  font-size: 1.8rem; /* 调大字体 */
}

.card p {
  font-size: 1.2rem; /* 调大字体 */
  line-height: 1.8;
  margin-bottom: 15px;
  color: #4a4a4a; /* 深灰色 */
}

.card ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}

.card ul li {
  font-size: 1.2rem; /* 调大字体 */
  margin-bottom: 10px;
  color: #4a4a4a; /* 深灰色 */
}

/* 图片样式 */
.experiment-image {
  width: 100%; /* 图片宽度 */
  max-width: 800px; /* 最大宽度 */
  height: auto; /* 高度自适应 */
  margin: 20px auto; /* 居中显示 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>